import { cssPrefix } from '../baseData';
import React from 'react';

class TotalInfo extends React.Component{
  render(){
    let { showTotal, total, pages, current } = this.props
    return <div className={`${cssPrefix}pagination-total`}>{showTotal(total, pages, current)}</div>;
  }
}

class PageItem extends React.Component{

  getContent(index, halfItemSize, quarterItemSize){
    let { pageItemSize, current, pages } = this.props,
      content = '';

    if(pageItemSize >= pages){
      content = index
    }else if(current < halfItemSize){
      if(index <= halfItemSize || index <= (current + quarterItemSize) || index == pages){
        content = index;
      }else{
        index + 1 == pages ? (content = '...') : (content = '');
      }
    }else if(current > (pages - halfItemSize + 1)){
      if(index == 1 || index >= (current - quarterItemSize) || index >= (pages - halfItemSize + 1) ){
        content = index;
      }else{
        index == 2 ? (content = '...') : (content = '');
      }
    }else{

      if(index == 1 || index == pages || (index <= (current + quarterItemSize) && index >= (current - quarterItemSize))){
        content = index;
      }else{
        (index == (current + quarterItemSize + 1) || index == (current - quarterItemSize - 1))
          ? (content = '...')
          : (content = '');
      }
    }

    return content;
  }

  render(){
    let { firstPage, lastPage, prevPage, nextPage, pages, pageItemSize, current, changePage } = this.props,
      pagesArr = new Array(pages),
      halfItemSize = Math.ceil(pageItemSize/2),
      quarterItemSize = Math.floor(pageItemSize/4);
    pagesArr.fill(1);


    return <div className={`${cssPrefix}pagination`}>
      {
        firstPage
        && <span
          onClick={current != 1 ? changePage.bind(this, 1) : ()=>{}}
          className={`page-item ${current == 1 ? ' page-disable' : ''}`}
        >{firstPage}</span>
      }

      {
        prevPage
        && <span
          onClick={current != 1 ? changePage.bind(this, current-1) : ()=>{}}
          className={`page-item ${current == 1 ? ' page-disable' : ''}`}
        >{prevPage}</span>
      }

      { pagesArr.map((item, index)=>{
        let content = this.getContent(index+1, halfItemSize, quarterItemSize);
        return content
          ? (
            content == '...'
            ? <span
                key={index}
                className={`page-item page-point`}
              >{content}</span>
            : <span
                key={index}
                className={`page-item${ (index+1) == current ? ' page-current' : '' }`}
                onClick={changePage.bind(this, content)}
              >{content}</span>
          )

          : '';
      }) }

      {
        nextPage
        && <span
          className={`page-item ${current == pages ? ' page-disable' : ''}`}
          onClick={current != pages ? changePage.bind(this, current+1) : ()=>{} }
        >{nextPage}</span>
      }

      {
        lastPage
        && <span
          onClick={current != pages ? changePage.bind(this, pages) : ()=>{} }
          className={`page-item ${current == pages ? ' page-disable' : ''}`}
        >{lastPage}</span>
      }
    </div>
  }
}

class ChangeSize extends React.Component{
  render(){
    let { pageSizeOptions, pageSize, changePageSize } = this.props
    return <div className={`${cssPrefix}pagination-change-size`}>
      <span>每页条数: </span>
      <select value={pageSize} onChange={changePageSize.bind(this)}>
        {
          pageSizeOptions.map((item, index)=>{
            return <option key={index} value={item}>{item}</option>
          })
        }
      </select>
    </div>
  }
}

class QuickJumper extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      quickValue: ''
    }
  }
  change(e) {
    let quickValue = parseInt(e.target.value);

    isNaN(quickValue) && (quickValue = '');

    this.setState({ quickValue })
  }

  render(){
    return <div className={`${cssPrefix}pagination-quick-jumper`}>
      <input value={this.state.quickValue} onChange={this.change.bind(this)} />
      <span onClick={this.props.changePage.bind(this, this.state.quickValue)}>Go</span>
    </div>
  }
}

module.exports = {
  TotalInfo,
  PageItem,
  ChangeSize,
  QuickJumper
}